/**
 * Copyright ©
 * 
 * @author: zw
 * @date: 2022-11-25 
 */


import { useEffect } from 'react';
import { Space, Input, Button } from "antd";
import styles from './style.module.scss';
import './index.scss';
import loginBg from './init.ts';

const view = () => {

  useEffect(() => {
    loginBg();
    window.onresize = function () { loginBg() };
  }, []);

  return (
    <div className={styles.loginPage}>
      <canvas id="canvas" style={{ display: "block" }}></canvas>
      <div className={styles.loginBox + " loginbox"}>
        {/* 标题部分 */}
        <div className={styles.title}>
          <h1>通用后台系统</h1>
          <p>Strive Everyday</p>
        </div>
        {/* 表单部分 */}
        <div className="form">
          <Space direction="vertical" size="large" style={{ display: 'flex' }}>
            <Input placeholder="用户名" />
            <Input.Password placeholder="密码" />

            <div className="captchaBox">
              <Input placeholder="验证码" />
              <div className="captchaImg" >
                <img height="38" alt="" />
              </div>
            </div>
            <Button type="primary" className="loginBtn" block >登录</Button>
          </Space>
        </div>
      </div>
    </div >
  );
}

export default view;